<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- 页眉 -->
<div class="header">
    <!-- 搜索框左侧菜单按钮 -->
    <div class="menu iconfont icon-menu"></div>
    <!-- 搜索框 -->
    <div class="header" >
        <div class="col-xs-5"></div>
        <div class="zoom iconfont icon-search"></div>
    </div>
</div>
<div  class="navbar">
    <img src="../static/ooo.png" height="350" width="100%" alt="">
</div>
<!-- 主体部分 -->
<div class="main">
    <!--倒计时-->
<!--    <div class="count-down" style="text-align:center;">-->
<!--        <div class="time" >-->
<!--            <i>距离本场结束</i>-->
<!--            <span class="hour">24</span>:-->
<!--            <span class="minute">00</span>:-->
<!--            <span class="second">00</span>-->
<!--        </div>-->
        <br>
    <div>
        <!-- 秒杀主体区 -->
        <ul>
            <li class="active" style="text-align:center;">
                <br>
                <div class="form-group">
                    <label class="col-sm-10 control-label">商品图片</label>
                    <div class="col-sm-10">
                        <img src="" id="img" width="100px" height="100px">
                    </div>
                </div>
            </li>
            <li style="text-align:center;">
                <br>
                <div class="form-group">
                    <label class="col-sm-10 control-label">商品名称</label>
                    <div class="col-sm-10">
                        <span id="s1"></span>
                    </div>
                </div>
            </li>
            <li style="text-align:center;">
                <br>
                <div class="form-group">
                    <label class="col-sm-10 control-label">活动价格</label>
                    <div class="col-sm-10">
                        <span id="s2"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="footer" style="height: 200px">
        <div>
            <div class="iconfont icon-home"></div>
            <button class="btn btn-danger" th:onclick="orderAdd()">立即购买</button>
        </div>
    </div>
</div>
</body>
</html>
<script>
    //倒计时
    // var time = 24*60*60-1; //倒计时24个小时的秒数
    //
    // var dsq = setInterval(function(){
    //     var hour=0,minute=0,second=0;//时间默认值
    //     if(time > 0){
    //         hour = Math.floor(time / (60 * 60)) ;
    //         minute = Math.floor(time / 60) - (hour * 60);
    //         second = Math.floor(time) - (hour * 60 * 60) - (minute * 60);
    //     }else{
    //         clearInterval(dsq);
    //     }
    //     if (minute <= 9) minute = '0' + minute;
    //     if (second <= 9) second = '0' + second;
    //     $('.hour').text(hour);
    //     $('.minute').text(minute);
    //     $('.second').text(second);
    //     time--;
    // }, 1000);
    // function orderAdd(id){
    //     alert(id)
    // }

    var id = [[${param.seckillId}]]
    $.post(
        "/sec/findBySeckillByMid",
        {"id":id},
        function (obj) {
          console.log(obj);
          $("#s1").text(obj.shopName);
          $("#s2").text(obj.seckillPrice);
          $("#img").prop("src",obj.shopImgUrl);
        }
    )
    function orderAdd() {
        $.post(
            "/order/insert",
            $("form").serialize(),
            function (obj) {
                if (obj>0){
                    location="/sec/orderAdd?id="+id
                }
            }
        )
    }
</script>
